<template>
  <ve-line
    :data="chartData"
    :settings="chartSettings"
    :extend="extendSettings"
    :theme="tdTheme"
    :data-zoom="dataZoom"
    height="100%"
  ></ve-line>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import ChartMixin from './chartMixins'

@Component({
  name: 'LineChart',
  mixins: [ChartMixin]
})
export default class LineChart extends Vue {
  tdTheme = require('./theme.json')
  chartSettings = {
    yAxisName: ['个']
  }
  extendSettings = {
    grid: {
      left: 40
    },
    legend: {
      itemWidth: 12,
      type: 'scroll',
      padding: [0, 0, 0, 40]
    },
    xAxis: {
      axisTick: {
        show: true,
        inside: true,
        lineStyle: {
          color: 'rgb(35, 56, 81)'
        }
      }
    }
  }
  chartData = {}
}
</script>
<style lang="scss" scoped></style>
